<template>
  <div>
    <!-- 首页导航 -->
    <Navs></Navs>
    <!-- content -->
    <section class="content">
      <!-- swiper -->
      <swiper :options="swiperOption" class="swipersty" v-if="bannerLuBo.length">
        <swiper-slide v-for="(item,index) in bannerLuBo" :key="index">
          <img
            @click="loctionHref(item.url)"
            :src="item.img"
            alt
            style="width: 100%;height: 33.25rem;cursor:pointer;"
          />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div
          class="swiper-button-prev"
          slot="button-prev"
          :style="{'background-image':'url('+lunboUp+')'}"
        ></div>
        <div
          class="swiper-button-next"
          slot="button-next"
          :style="{'background-image':'url('+lunboNext+')'}"
        ></div>
      </swiper>
      <div class="content_cont">
        <!-- 全局搜索 -->
        <search></search>
        <!-- 主内容 -->
        <div class="mainCont">
          <div class="mainCont_left">
            <div class="left1">
              <div class="header">快速查询（专题统计报表）</div>
              <img :src="titleimg" alt />
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                  :label="item.label"
                  :name="item.name"
                  v-for="(item,index) in dataSearchDatas"
                  :key="index"
                  class="Listpane"
                >
                  <div class="ListpaneLeft">
                    <div
                      v-for="(listLeft,keyLeft) in item.textArrLeft"
                      :key="keyLeft"
                      @click="jumpLianjie(true,listLeft)"
                    >{{listLeft.name}}</div>
                  </div>
                  <div class="center"></div>
                  <div class="ListpaneRight">
                    <div
                      v-for="(listRight,keyRight) in item.textArrRight"
                      :key="keyRight"
                      @click="jumpLianjie(true,listRight)"
                      class="ListpaneRight"
                    >{{listRight.name}}</div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="left2">
              <div class="header">可视化图表</div>
              <img :src="titleimg" alt />
              <div class="top">可视化统计图秉持方便易用的理念展示统计数字，通过简单的图像或动态界面及互动式统计图，您可更清楚了解一些统计指标。</div>
              <!-- swiper -->
              <swiper :options="swiperOptionS" class="swipersty" style="margin-top:1.2rem;">
                <swiper-slide v-for="(item,index) in dataSwiperS" :key="index">
                  <img :src="item.url" alt style="width:16.125rem;height:11.25rem;" />
                  <div class="cont">
                    <div class="top">
                      {{item.label}}
                      <span>/{{'0'}}{{index+1}}</span>
                    </div>
                    <div class="bottom">{{item.compone}}</div>
                  </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
                <div
                  class="swiper-button-prev"
                  slot="button-prev"
                  :style="{'background-image':'url('+ksLeft+')'}"
                ></div>
                <div
                  class="swiper-button-next"
                  slot="button-next"
                  :style="{'background-image':'url('+ksRight+')'}"
                ></div>
              </swiper>
            </div>
            <div class="left3">
              <div class="header">数据资讯</div>
              <img :src="titleimg" alt />
              <div class="dataMessage" v-for="(item,index) in dataZxun" :key="index">
                <div class="message_left">
                  <div class="top">{{item.title}}</div>
                  <div class="center">{{item.cont}}</div>
                  <div class="bottom">
                    <span>{{item.time}}</span>
                    <span @click="$router.push({path:'/listDetails',query:{id:item.id}})">查看详情</span>
                  </div>
                </div>
                <img :src="item.url" alt />
              </div>
              <div class="moreD">
                <div @click="$router.push('/dataList')">查看更多-></div>
              </div>
            </div>
          </div>
          <div class="mainCont_right">
            <div class="right1">
              <div class="title">数据更新</div>
              <div class="content">
                <div v-for="(item,index) in dataUpdata" :key="index">
                  <div class="up" @click="jumpLianjie(false,item)">
                    {{computedStr(item.title)}}
                    <!-- <div style="border:1px solid red;width:12rem;height: 2.125rem;"></div> -->
                    <div class="next">({{item.updataTime}})</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right2">
              <div class="title">24小时热文</div>
              <div class="content">
                <div
                  v-for="(item,index) in twentyFourtimeData"
                  :key="index"
                  @click="$router.push({path:'/listDetails',query:{id:item.id}})"
                >
                  <img :src="item.url" alt />
                  <div>
                    <div class="top" :title="item.title">{{item.title}}</div>
                    <div class="bottom" :title="item.content">{{item.content}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>

<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
  name: 'index',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search
  },
  data () {
    return {
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
          delay: 2500,
          stopOnLastSlide: false,
          disableOnInteraction: true,
          reverseDirection: false,
          waitForTransition: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      bannerLuBo: [
        // {
        //   img: require('../../../static/index/banner1.png'),
        //   url: 'http://www.baidu.com'
        // },
        // {
        //   img: require('../../../static/index/banner1.png'),
        //   url: 'http://www.baidu.com'
        // }
      ],
      lunboUp: require('../../../static/index/leftS.png'),
      lunboNext: require('../../../static/index/rightS.png'),
      titleimg: require('../../../static/index/title12.png'),
      ksLeft: require('../../../static/index/ksLeft.png'),
      ksRight: require('../../../static/index/ksRight.png'),
      // 默认选中
      activeName: 'first',
      // 月度、季度、年度数据
      dataSearchDatas: [
        {
          label: '月度 /Monthly',
          name: 'first',
          textArrLeft: [
            // '月度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
            // '月度工业增加值增工业增加值增速工业速。',
            // '月度工业增加值增速。',
            // '月度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
          ],
          textArrRight: [
            // '月度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
            // '月度工业增加值增工业增加值增速工业速。',
            // '月度工业增加值增速。',
            // '月度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
          ]
        },
        {
          label: '季度 /Quarter',
          name: 'second',
          textArrLeft: [
            // '季度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
            // '季度工业增加值增工业增加值增速工业速。',
            // '季度工业增加值增速。',
            // '季度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
          ],
          textArrRight: [
            // '季度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
            // '季度工业增加值增工业增加值增速工业速。',
            // '季度工业增加值增速。',
            // '季度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
          ]
        },
        {
          label: '年度 /Year',
          name: 'third',
          textArrLeft: [
            // '年度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
            // '年度工业增加值增工业增加值增速工业速。',
            // '年度工业增加值增速。',
            // '年度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
          ],
          textArrRight: [
            // '年度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
            // '年度工业增加值增工业增加值增速工业速。',
            // '年度工业增加值增速。',
            // '年度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
          ]
        }
      ],
      swiperOptionS: {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      dataSwiperS: [
        // {
        //   url: require('../../../static/index/luboer.png'),
        //   label: '大中城市住宅销售价格',
        //   compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
        // },
        // {
        //   url: require('../../../static/index/luboer.png'),
        //   label: '大中城市住宅销售价格',
        //   compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
        // },
        // {
        //   url: require('../../../static/index/luboer.png'),
        //   label: '大中城市住宅销售价格',
        //   compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
        // },
        // {
        //   url: require('../../../static/index/luboer.png'),
        //   label: '大中城市住宅销售价格',
        //   compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
        // }
      ],
      // 资讯数据
      dataZxun: [
        // {
        //   title: '这里是资讯',
        //   cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
        //   time: '57分钟前',
        //   url: require('../../../static/index/zixuntu.png')
        // },
        // {
        //   title: '这里是资讯',
        //   cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
        //   time: '57分钟前',
        //   url: require('../../../static/index/zixuntu.png')
        // },
        // {
        //   title: '这里是资讯',
        //   cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
        //   time: '57分钟前',
        //   url: require('../../../static/index/zixuntu.png')
        // },
        // {
        //   title: '这里是资讯',
        //   cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
        //   time: '57分钟前',
        //   url: require('../../../static/index/zixuntu.png')
        // }
      ],
      // 数据更新
      dataUpdata: [
        // {
        //   title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
        //   updataTime: '2019-09-06 17:47:39'
        // },
        // {
        //   title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
        //   updataTime: '2019-09-06 17:47:39'
        // },
        // {
        //   title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
        //   updataTime: '2019-09-06 17:47:39'
        // },
        // {
        //   title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
        //   updataTime: '2019-09-06 17:47:39'
        // },
        // {
        //   title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
        //   updataTime: '2019-09-06 17:47:39'
        // },
        // {
        //   title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）（按旅游目的分组）',
        //   updataTime: '2019-09-06 17:47:39'
        // }
      ],
      // 24小时热闻数据
      twentyFourtimeData: [
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // },
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // },
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // },
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // },
        // {
        //   url: require('../../../static/index/timeLZ.png'),
        //   title: '这是标题',
        //   content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        // }
      ],
      indexDatalabel: ['monthly', 'quarter', 'year'],
      // 选中的下标
      selectLabelS: 0
    }
  },
  methods: {
    loctionHref (url) {
      console.log(url, 'url')
      if (url !== '') {
        window.location.href = url
      }
    },
    handleClick (tab, event) {
      console.log(101010)
      console.log(tab, event)
      this.selectLabelS = tab.index
    },
    // 获取banner
    getBanner () {
      this.$axios({
        method: 'GET',
        url: 'index/index/banner',
        parmas: {

        }
      }).then(res => {
        // console.log(res, '获取banner')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.bannerLuBo = res.data.data.list
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 快速查询
    getClassify (type) {
      this.$axios({
        method: 'GET',
        url: 'index/index/classify',
        params: {
          type: type,
          limit: 8
        }
      }).then(res => {
        console.log(res, '快速查询')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let brrtLeft = []
          let brrtRight = []
          res.data.data.list.forEach((item, index) => {
            if (index < 4) {
              brrtLeft.push(item)
            } else {
              brrtRight.push(item)
            }
          })
          if (type === 'A') {
            this.dataSearchDatas[0].textArrLeft = brrtLeft
            this.dataSearchDatas[0].textArrRight = brrtRight
          } else if (type === 'B') {
            this.dataSearchDatas[1].textArrLeft = brrtLeft
            this.dataSearchDatas[1].textArrRight = brrtRight
          } else if (type === 'C') {
            this.dataSearchDatas[2].textArrLeft = brrtLeft
            this.dataSearchDatas[2].textArrRight = brrtRight
          }
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 可视化图表
    viewChart () {
      this.$axios({
        method: 'GET',
        url: 'index/index/view-chart',
        params: {}
      }).then(res => {
        // console.log(res, '可视化图表')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            let srtAs = {
              url: item.img,
              label: item.title,
              compone: item.content
            }
            arrts.push(srtAs)
          })
          this.dataSwiperS = arrts
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 数据咨询、资讯列表
    article (page) {
      this.$axios({
        method: 'GET',
        url: 'index/index/article',
        params: {
          page: page,
          limit: 4
        }
      }).then(res => {
        // console.log(res, '数据咨询、资讯列表')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            let objuu = {
              title: item.title,
              cont: item.desc,
              time: item.update_time,
              url: item.thumb,
              id: item.id
            }
            arrts.push(objuu)
          })
          this.dataZxun = arrts
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 数据更新
    dataUpdating () {
      this.$axios({
        method: 'GET',
        url: 'index/index/data-updating',
        params: {
        }
      }).then(res => {
        console.log(res, '数据更新')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            let objuu = {
              id: item.id,
              title: item.name,
              updataTime: item.time,
              table_name: item.table_name,
              type: item.type,
              filter: item.filter
            }
            arrts.push(objuu)
          })
          this.dataUpdata = arrts
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 24小时热闻
    hotArticle () {
      this.$axios({
        method: 'GET',
        url: 'index/index/hot-article',
        params: {
        }
      }).then(res => {
        // console.log(res, '24小时热闻')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            let objuu = {
              url: item.thumb,
              title: item.title,
              content: item.desc,
              id: item.id
            }
            arrts.push(objuu)
          })
          this.twentyFourtimeData = arrts
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 跳转至数据
    jumpLianjie (state, objStex) {
      console.log(state, 'statestatestate')
      console.log(objStex, 'this.indexDatalabel[this.objStex]')
      switch (state) {
        case true:// 快速查询（专题统计报表）
          console.log(12000)
          if (objStex.type === '1') { // 非地区
            this.$router.push(
              {
                path: '/datasweb',
                query: {
                  type: this.indexDatalabel[this.selectLabelS],
                  defaultLeftId: objStex.id
                }
              }
            )
          } else if (objStex.type === '2') { // 地区
            this.$router.push(
              {
                path: '/datasweb',
                query: {
                  type: 'area',
                  defaultLeftId: objStex.id
                }
              }
            )
          }
          break
        case false:// 数据更新
          if (objStex.type === '1') { // 非地区
            this.$router.push(
              {
                path: '/datasweb',
                query: {
                  type: objStex.filter,
                  defaultLeftId: objStex.id
                }
              }
            )
          } else if (objStex.type === '2') { // 地区
            this.$router.push(
              {
                path: '/datasweb',
                query: {
                  type: 'area',
                  defaultLeftId: objStex.id
                }
              }
            )
          }
          break
      }
    }

  },
  computed: {
    // 计算字符串
    computedStr () {
      return (str) => {
        let Strs = ''
        str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
        return Strs
      }
    }
  },
  mounted () {
    // 获取banner
    this.getBanner()
    // 获取快速查询//   A月度 B季度   C年度
    this.getClassify('A')
    this.getClassify('B')
    this.getClassify('C')
    // 可视化图表
    this.viewChart()
    // 数据咨询、资讯列表
    this.article(1)
    // 数据更新
    this.dataUpdating()
    // 24小时热闻
    this.hotArticle()
    if (this.$route.params.type === 'loginTrue') {
      console.log(this.$route.params.type, 'this.$router.query.type ')
      this.$auth.auth = true
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .swipersty {
    width: 100%;
    height: 33.25rem;
  }
  & > .content_cont {
    width: 84.25rem;
    // border: 1px solid red;
    & > .mainCont {
      margin-top: 3.125rem;
      margin-bottom: 3.125rem;
      width: 100%;
      // border: 0.0625rem solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      & > .mainCont_left {
        // border: 0.0625rem solid red;
        width: 55.625rem;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        background-color: #fff;
        & > .left1 {
          margin-top: 2.5rem;
          width: 100%;
          & > .header {
            width: 100%;
            text-align: center;
            font-size: 1.625rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0.375rem;
            color: #000000;
          }
          & > img {
            width: 100%;
            height: 0.75rem;
          }
          /deep/ .el-tabs__item {
            font-size: 1.4rem;
            font-weight: bold;
            font-stretch: normal;
          }
          .Listpane {
            padding: 1.25rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            & > .ListpaneLeft {
              width: 24.75rem;
              height: 17rem;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: flex-start;
              & > div {
                width: 100%;
                height: 4.375rem;
                font-size: 1.125rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 2rem;
                letter-spacing: 0rem;
                color: #666666;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; /* 省略号在第几行 */
                -webkit-box-orient: vertical;
              }
              & > div:nth-last-child(n + 2) {
                border-bottom: 0.0625rem solid #f0f0f0;
              }
              & > div:hover {
                cursor: pointer;
                color: #52b6e3;
              }
            }
            & > .center {
              width: 0.125rem;
              height: 17rem;
              background-color: #dbdbdb;
            }
            & > .ListpaneRight {
              width: 24.75rem;
              height: 17rem;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: flex-start;
              & > div {
                width: 100%;
                height: 4.375rem;
                font-size: 1.125rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 2rem;
                letter-spacing: 0rem;
                color: #666666;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; /* 省略号在第几行 */
                -webkit-box-orient: vertical;
              }
              & > div:nth-last-child(n + 2) {
                border-bottom: 0.0625rem solid #f0f0f0;
              }
              & > div:hover {
                cursor: pointer;
                color: #52b6e3;
              }
            }
          }
        }
        & > .left2 {
          width: 100%;
          & > .header {
            width: 100%;
            text-align: center;
            font-size: 1.625rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0.375rem;
            color: #000000;
          }
          & > img {
            width: 100%;
            height: 0.75rem;
          }
          & > .top {
            margin: 0 auto;
            width: 39.75rem;
            text-align: center;
            font-size: 1rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.125rem;
            color: #565656;
          }
          /deep/.swiper-slide {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: flex-start;
            & > .cont {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: flex-start;
              & > .top {
                font-size: 1.375rem;
                font-weight: bold;
                font-stretch: normal;
                line-height: 1.125rem;
                letter-spacing: 0.125rem;
                color: #333333;
                & > span {
                  color: #52b6e3;
                }
              }
              & > .bottom {
                width: 32.125rem;
                font-size: 1.125rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 2.125rem;
                letter-spacing: 0rem;
                color: #2d2d2d;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4; /* 省略号在第几行 */
                -webkit-box-orient: vertical;
              }
            }
          }
        }
        & > .left3 {
          margin-top: 1.5rem;
          width: 100%;
          & > .header {
            width: 100%;
            text-align: center;
            font-size: 1.625rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0.375rem;
            color: #000000;
          }
          & > img {
            width: 100%;
            height: 0.75rem;
          }
          & > .dataMessage {
            width: 100%;
            height: 10.625rem;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            & > .message_left {
              width: 39.125rem;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;
              & > .top {
                width: 39.125rem;
                font-size: 1.375rem;
                font-weight: normal;
                font-stretch: normal;
                // line-height: 1.375rem;
                letter-spacing: 0.125rem;
                color: #232323;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1; /* 省略号在第几行 */
                -webkit-box-orient: vertical;
              }
              & > .center {
                width: 39.125rem;
                font-size: 1.25rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 2rem;
                letter-spacing: 0rem;
                color: #424242;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; /* 省略号在第几行 */
                -webkit-box-orient: vertical;
              }
              & > .bottom {
                width: 37.625rem;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                & > span:nth-child(1) {
                  font-size: 1rem;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 1.875rem;
                  letter-spacing: 0rem;
                  color: #999999;
                }
                & > span:nth-child(2) {
                  padding: 0.125rem 0.75rem;
                  font-size: 1rem;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 1.875rem;
                  letter-spacing: 0rem;
                  color: #999999;
                  border: 0.0625rem solid #999;
                  border-radius: 0.9375rem;
                }
                & > span:nth-child(2):hover {
                  cursor: pointer;
                  color: #52b6e3;
                  border: 0.0625rem solid #52b6e3;
                }
              }
            }
            & > img {
              width: 13.125rem;
              height: 7.5rem;
              border-radius: 0.725rem;
            }
          }
          & > .dataMessage:nth-last-child(n + 1) {
            border-bottom: 0.0625rem solid #dbdbdb;
          }
          & > .moreD {
            width: 100%;
            height: 7.5rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            & > div {
              margin-right: 1.5rem;
              font-size: 1.25rem;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0.125rem;
              color: #9ea5a7;
            }
            & > div:hover {
              cursor: pointer;
              color: #52b6e3;
            }
          }
        }
      }
      & > .mainCont_right {
        width: 27.375rem;
        & > .right1 {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          background-color: #ffffff;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
          & > .title {
            width: 24.875rem;
            height: 3.75rem;
            font-size: 1.5rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0.3125rem;
            color: #000000;
            border-bottom: 0.0625rem solid #dbdbdb;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
          }
          & > .content {
            width: 24.875rem;
            & > div {
              width: 100%;
              height: 5.25rem;
              // border:1px solid red;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: space-around;
              & > .up {
                position: relative;
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                font-size: 1.125rem;
                line-height: 2.625rem;
                color: #333333;
                padding-bottom: 1.75rem;
                // border: 1px solid red;
                & > .next {
                  width: 12.625rem;
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  font-size: 1.125rem;
                }
              }
              & > .up:hover {
                cursor: pointer;
                color: #52b6e3;
              }
            }
            & > div:nth-last-child(n + 2) {
              border-bottom: 0.0625rem solid #dbdbdb;
            }
          }
        }
        & > .right2 {
          margin-top: 1.25rem;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          background-color: #ffffff;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
          & > .title {
            width: 24.875rem;
            height: 3.75rem;
            font-size: 1.5rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0.3125rem;
            color: #000000;
            border-bottom: 0.0625rem solid #dbdbdb;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
          }
          & > .content {
            width: 24.875rem;
            & > div {
              width: 100%;
              height: 7.625rem;
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              align-items: center;
              & > img {
                width: 7.25rem;
                height: 5.125rem;
              }
              & > div {
                width: 16rem;
                height: 5.125rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                & > .top {
                  font-size: 1.125rem;
                  font-weight: normal;
                  font-stretch: normal;
                  // line-height: 23px;
                  letter-spacing: 0rem;
                  color: #333333;
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1; /* 省略号在第几行 */
                  -webkit-box-orient: vertical;
                }
                & > .bottom {
                  width: 16rem;
                  font-size: 1rem;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 1.5rem;
                  letter-spacing: 0rem;
                  color: #666666;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2; /* 省略号在第几行 */
                  -webkit-box-orient: vertical;
                }
              }
            }
            & > div:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
